<template>
	<!-- 引入顶部自定义导航栏组件 -->
	<!-- <goodsTop></goodsTop> -->
 
	<!-- 空购物车  通过缓存中是否有参数来判断 showgoods-->
	<view class="empty" v-if="!showgoods">
		<view class="empty_img">
			<image src="../../static/content-empty.png" mode="aspectFit"></image>
		</view>
	</view>
	<view class="empty_text" v-if="!showgoods">
		购物车空空如也~
	</view>
 
	<!-- 读取缓存有商品时   -展示商品 -->
	<view v-if="showgoods">
		<view v-for="(item, index) in goodlists" :key="index"
			:class="['touch_item', item.isTouchMove ? 'touch_move_active' : '']" @touchstart="touchStart"
			@touchmove="touchmove($event,index)">
 
			<view class="product_right">
				<view class="left" @click="select(index)">
					<view class="tick_circle" :class="item.isSelected ? 'active': ''">
						<!-- 打勾,显示或隐藏 -->
						<view>
							<!-- hook_one与two为伪类画出对钩 -->
							<view class="hook_one"></view>
							<view class="hook_two"></view>
						</view>
					</view>
				</view>
				<view class="center">
					<image class="img" :src="item.goodimg" mode="aspectFill"></image>
				</view>
				<view class="right">
					<view class="name">
						{{item.goodName}}
					</view>
					<!-- 	商品详细信息，暂且用不着
					<view class="des">
						{{item.gooddes}}
					</view> -->
					<view class="price">
						￥<text>{{item.goodprice}}</text>
					</view>
					<view class="count">
						<view @click="sub(index)" class="reduce"></view>
						<view class="inp">
							{{item.goodnub}}
						</view>
						<!-- <input type="number" class="inp" v-model="item.sum"> -->
						<view @click="add(index)" class="add"></view>
					</view>
				</view>
			</view>
			<!--  :class="item.isTouchMove ? 'deleteRight_active' : 'deleteRight'" -->
			<view class="del" @click="deleteBtn(index)">
				<text>删除</text>
			</view>
		</view>
 
		<!-- 结算栏 -->
		<view class="settlement" v-if="showgoods">
			<!--全选按钮  -->
			<view class="check_text" @click="isSelectedAll">
				<view class="tick_circle" :class="allChecked ? 'active': ''">
					<!-- 打勾,显示或隐藏 -->
					<view>
						<view class="hook_one"></view>
						<view class="hook_two"></view>
					</view>
				</view>
				<view class="check_text1">全选</view>
			</view>
			<view class="check_text2">合计:
				<text class="check_text3">￥<text class="check_text4">{{allPrice}}</text></text>元
			</view>
			<view class="settlement_button" @click="pay_ment">结算</view>
		</view>
 
 
	</view>
</template>
 
<script>
	// import goodsTop from "@/components/goodsTop.vue"
 
	import {
		setStorage,
		getStorage,
		removeStorage
	} from '../../common/local/local.js'
 
	import tips from '../../common/Tips/tip.js'
 
	export default {
		components: {
			// goodsTop,
		},
		onShow() {
			// const session = getStorage('session');
			//    if (!session) {
			//      Tips.toast('你还没有登录哦~')
			//    } else {
			//    const cartList = getStorage("cartList")
			// }
 
 
			//获取本地缓存购物车数据渲染
			let cartData = getStorage('cartList')
			// 获取存储商品对象所有属性id
			let dataKeys = Object.keys(cartData)
			let _goodlists = []
			dataKeys.map((key, index) => {
				_goodlists.push(cartData[key])
			})
			//获取到的商品已放入goodlists中
			this.goodlists = _goodlists
			console.log(this.goodlists.length);
 
		},
		computed: {
			// 计算总价
			allPrice() {
				var price = 0
				for (var i = 0; i < this.goodlists.length; i++) {
					if (this.goodlists[i].isSelected) {
						//数量goodnub * 单价 goodprice
						price += this.goodlists[i].goodnub * this.goodlists[i].goodprice
					}
				}
				return price.toFixed(2)
			},
 
			// 是否显示默认页面 如果缓存中有商品就显示
			showgoods() {
				if (this.goodlists.length < 1) {
					return false
				} else {
					return true
				}
			}
		},
		data() {
			return {
				//从缓存中读取到的商品列表
				goodlists: [],
				//判定购物车是否全选
				allChecked: true,
				//startX为手指触摸开始的坐标X轴
				startX: '',
 
			}
		},
		methods: {
 
			// 更新购物车缓存
			updateCartCache() {
				//获取本地缓存购物车数据渲染
				let cartData = {}
				for (let i = 0; i < this.goodlists.length; i++) {
					cartData[this.goodlists[i].goodId] = this.goodlists[i]
				}
				setStorage('cartList', cartData)
				console.log("新的缓存", cartData);
			},
 
			//1、删除列表指定项  （两种方式  1.弹框确认删除  2.直接删除，小警示框 【已删除】）
 
			// 如何在删除后决定isAllChecked的值
 
			// 1.弹框确认删除 
			deleteBtn(index) {
				tips.confirm('您确定要删除吗', '提示', true).then(res => {
					if (res) {
						// splice (删除字符串的API)
						this.goodlists.splice(index, 1)
						this.updateCartCache()
						// 删除指定项以后将this.leftSlide 置为-1，不让任一项显示删除按钮
						this.leftSlide = -1
					} else {
						this.leftSlide = -1
						return
					}
				})
 
			},
 
			//  2.直接删除，小警示框 【已删除】
			// deleteBtn(index) {
			// 	//导入tip包,使用弹框警告
			// 	tips.toast('已删除')
			// 	this.goodlists.splice(index, 1)
			// 	this.updateCartCache()
			// },
			// 2、购物车减少
			sub: function(index) {
				let count = this.goodlists[index].goodnub
				// 如果只有一件就删除改商品
				if (count <= 1) {
					this.deleteBtn()
					return;
				}
				if (count > 1) {
					count = count - 1
					this.goodlists[index].goodnub = count
				}
				// 更新缓存
				this.updateCartCache()
			},
 
			// 3、购物车增加
			add: function(index) {
				let count = this.goodlists[index].goodnub
				count = count + 1
				this.goodlists[index].goodnub = count
				// 更新缓存
				this.updateCartCache()
			},
 
			// 4、单选,选择商品,当所有单选按钮都选中，则全选按钮选中
			select(index) {
				const item = this.goodlists[index]
				console.log("点击的是:", this.goodlists[index]);
				item.isSelected = !item.isSelected
				if (item.isSelected) {
					// 遍历列表看是否都选中，返回boolean
					let selectall = this.goodlists.every(itemT => {
						return itemT.isSelected === true
					})
					console.log("此时的selectall", selectall);
					if (selectall) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				} else {
					this.allChecked = false
				}
				// 更新购物车缓存
				this.updateCartCache()
				console.log("更新购物车");
			},
			// 5、全选的方法
			isSelectedAll() {
				this.allChecked = !this.allChecked
				// 如果allChecked为真，那么设置每一项都被选中
				if (this.allChecked) {
					this.goodlists.map(item => {
						item.isSelected = true
					})
				} else {
					this.goodlists.map(item => {
						item.isSelected = false
					})
				}
				this.updateCartCache()
			},
 
			// 6.手指滑动显示删除按钮事件
			touchStart(e) {
				// 开始触摸
				// console.log('start开始位置',e.touches[0].clientX);
				this.startX = e.touches[0].clientX
				// console.log(this.startX)
 
			},
			//7.捕捉移动事件  往左划X变下  往右划X变大
			touchmove(e, index) {
				this.moveX = e.touches[0].clientX
				// console.log("移动",e.touches[0].clientX);
 
				if (this.moveX < this.startX) {
					//判断出当前元素是在左滑 将元素的isTouchMove变为true
					// console.log(this.goodlists[index].isTouchMove);
					this.goodlists[index].isTouchMove = true
				} else {
					//判断出当前元素没有触发左滑
					this.goodlists[index].isTouchMove = false
				}
 
			},
			//跳转到支付页面
			pay_ment() {
				wx.navigateTo({
					// url: '/pages/payment/payment?allPrice=' + this.allPrice
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background: #ECECEC;
	}
	.empty {
		position: absolute;
		width: 100%;
		height: 100%;
		left:0px;
		top: 30%;
/* 		width: 184rpx;
		height: 324rpx; */
	}
 
	.empty_img>image {
		position:absolute;
		top:0%;
		left:calc(50% - 50px);
		width: 100px;
		height: 100px;
		border-radius: 50px;
		
		
	}
	.empty_text {
		position: absolute;
		width: 160px;
		height: 23px;
		left: calc(50% - 80px) ;
		top: 300px;
		font-weight: 350;
		font-size: 15px;
		text-align:center;
		color: #000000;
	}
	
	.touch_item {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		margin-top: 22rpx;
		height: 207rpx;
		width: 712rpx;
		margin-left: 19rpx;
		background: #FFFFFF;
		border-radius: 6rpx;
	
		overflow: hidden;
	}
 
	.del {
		background-color: orangered;
		width: 90px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		-webkit-transform: translateX(90px);
		transform: translateX(90px);
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		/* display: none; */
	}
	.touch_move_active .product_right,
	.touch_move_active .del {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	.product_right {
		width: 100%;
		display: flex;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		-webkit-transform: translateX(90px);
		transform: translateX(90px);
		margin-left: -90px
	}
 
	.left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		height: 100%;
	}
 
	.tick_circle {
		width: 35rpx;
		height: 35rpx;
		border: 2rpx solid #ACACAC;
		border-radius: 50%;
		position: relative;
	}
 
	.hook_one {
		width: 4rpx;
		height: 16rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 15rpx;
		left: 8rpx;
		transform: rotate(-45deg);
	}
 
	.hook_two {
		width: 4rpx;
		height: 24rpx;
		background-color: #FFFFFF;
		position: absolute;
		top: 7rpx;
		left: 20rpx;
		transform: rotate(45deg);
	}
 
	/* // 按钮 */
	.active {
		background: red;
		border: 2rpx solid red;
	}
 
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
 
	.img {
		border: 1rpx solid #eeeeee;
		border-radius: 16rpx;
		width: 152rpx;
		height: 152rpx;
	}
 
	.right {
		flex: 1;
		padding: 19rpx 50rpx 0 28rpx;
		position: relative;
	}
 
	.name {
		width: 359rpx;
		font-weight: 500;
		line-height: 150%;
	}
 
	/* 	.des {
		width: 330rpx;
		font-weight: 350;
		font-size: 22rpx;
		line-height: 33rpx;
		color: #8F8F8F;
	} */
 
	.price {
		font-family: 'Roboto';
		font-weight: 500;
		line-height: 28px;
		color: #BD002D;
		position: absolute;
		bottom: 15rpx;
		left: 19rpx;
	}
 
	.price>text {
		font-size: 30rpx;
	}
 
	.count {
		position: absolute;
		width: 153rpx;
		height: 44rpx;
		right: 22rpx;
		bottom: 19rpx;
		display: flex;
		justify-content: space-between;
	}
 
	.inp {
		min-width: 49rpx;
		text-align: center;
		font-size: 30rpx;
		line-height: 35rpx;
		margin-top: 5rpx;
		font-weight: 400;
		color: #404040;
	}
 
 
	/* 购物车的加减号使用伪类css实现 */
	.reduce {
		position: relative;
		border: 1rpx solid;
		width: 44rpx;
		height: 44rpx;
		color: #D9D9D9;
		transition: color .25s;
		margin-top: 0rpx;
		margin-left: 0rpx;
 
	}
 
 
	.reduce::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 28rpx;
		margin-left: -13rpx;
		margin-top: 0rpx;
		border-top: 2rpx solid;
	}
 
	.reduce:hover {
		color: #B80000;
	}
 
	.add {
		position: relative;
		border: 1rpx solid;
		width: 44rpx;
		height: 44rpx;
		color: #D9D9D9;
		transition: color .25s;
		margin-top: 0rpx;
		margin-left: 0rpx;
	}
 
 
	.add::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 28rpx;
		margin-left: -13rpx;
		margin-top: 0rpx;
		border-top: 2rpx solid;
	}
 
	.add::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		height: 28rpx;
		margin-left: 0rpx;
		margin-top: -13rpx;
		border-left: 2rpx solid;
	}
 
	.add:hover {
		color: #B80000;
	}

 
 
	/* 底部结算栏 */
	.settlement {
		width: 750rpx;
		height: 88rpx;
		position: fixed;
		bottom: 50px;
		left: 0;
		background: #FFFFFF;
		border-top: 1rpx solid #DADADA;
		display: flex;
		align-items: center;
		padding-left: 58rpx;
	}
 
	.check_text {
		width: 140rpx;
		display: flex;
		align-items: center;
	}
 
	.check_text1 {
		font-weight: 350;
		margin-left: 14rpx;
	}
 
	.check_text2 {
		text-align: right;
		width: 350rpx;
		font-weight: 350;
	}
 
	.check_text3 {
		color: #BD002D;
		padding: 0 10rpx;
		font-weight: 400;
	}
 
	.check_text4 {
		font-size: 36rpx;
	}
 
	.settlement_button {
		width: 168rpx;
		height: 48rpx;
		background: red;
		border-radius: 10px;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
		margin-left: 19rpx;
	}
</style>